import React,{Component} from 'react';
import HeaderBar from '../../components/headerNav/headBar';
import cookie from 'react-cookie'
import {port} from '../../public/index'
import { hashHistory } from 'react-router';

import './enrollOrder.css'

export default class enrollOrder extends Component{
    constructor(props){
        super(props);
        this.state={
            enrollOrderList:[]
        }
    }

    componentDidMount(){
        try{
            let token = window.getNativeAppToken();
            if(window.isNativeApp()){
                cookie.save('userId',token)
            }
        }catch (e){

        }

        try{
            let token = window.handler.getNativeAppToken();
            if(window.handler.isNativeApp()){
                cookie.save('userId',token)
            }
        }catch (e){

        }
        // http://121.196.232.233/card/subsOrder/user/oders?token={token}
        let url= port +'/card/subsOrder/user/oders?token='+cookie.load('userId')
        fetch( url)
            .then(res => {
                console.log(res.status)
                return res.json()
            })
            .then(json=>{
                this.setState({
                    enrollOrderList:json.data
                })
            })
            .catch(e =>{
                console.log(e)
            })
    }


    gotoDetail(data){
        hashHistory.push({
            pathname:'/enrollOrderDetail',
            query:{
                minPic:data.subscribeModel.minPic,
                title:data.title,
                status:data.status,
                createTime:data.createTime,
                skuId:data.skuId,
                phone:data.phone,
                skuPhone:data.subscribeModel.phone,
                name:data.name,
                code:data.code,
                id:data.id
            }
        })
    }

    render(){
        return(
            <div className="beScoll">
                {/*{*/}
                    {/*!(this.props.location.query.token||this.state.isIOsApp) &&*/}
                    {/*<HeaderBar content="订单"></HeaderBar>*/}
                {/*}*/}
                <div className="enrollOrderOuterTop">
                    {
                        this.state.enrollOrderList.length>0&&
                        this.state.enrollOrderList.map((data,index)=>{
                            return(
                                <div className="enrollOrderOuter" onClick={this.gotoDetail.bind(this,data)} key={index}>
                                    <div>
                                    </div>
                                    <div>
                                        <div className="enrollOrderleft">
                                            <p>
                                                <img src={data.subscribeModel.minPic} alt=""/>
                                            </p>
                                        </div>
                                        <ul  className="enrollOrderright">
                                            <li>
                                                <h4>{data.title}</h4>
                                            </li>
                                            <li>
                                                <h5>{data.subscribeModel.title}</h5>
                                            </li>

                                        </ul>
                                    </div>
                                    <div>
                                        <span>¥ <b>{parseInt(data.price).toFixed(2)}</b></span>
                                        <i>{data.status==1?'待使用':'已完成'}</i>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>

            </div>
        )
    }


}
